﻿@page "/write"
@namespace SwashbucklerDiary.Pages
@inherits ImportantComponentBase

@if (EnableMarkdown)
{
    <OnlyThisPageDisplay>
        <link href="css/extend/masa-blazor-extend-enqueued-snackbars-write.css" rel="stylesheet" />
    </OnlyThisPageDisplay>
}

<MyAppBar>
    <MButton Icon="true"
             OnClick="NavigateToBack">
        <MIcon>
            mdi-arrow-left
        </MIcon>
    </MButton>

    <MSpacer></MSpacer>

    <MButtonExtension Icon="true"
                      OnMousedownPreventDefault="true"
                      OnClick="InsertTimestamp">
        <MIcon>
            mdi-clock-outline
        </MIcon>
    </MButtonExtension>

    <MButton Icon="true"
             OnClick="()=>ShowSelectTag = true">
        <MIcon>
            mdi-label-outline
        </MIcon>
    </MButton>

    <MultiMenu @bind-Value="ShowMenu"
               DynamicListItems="MenuItems">
        <ButtonContent>
            <MultiDisplay>
                <DesktopContent>
                    <MIcon>mdi-dots-horizontal</MIcon>
                </DesktopContent>
                <MobileContent>
                    <MIcon>mdi-dots-vertical</MIcon>
                </MobileContent>
            </MultiDisplay>
        </ButtonContent>
    </MultiMenu>
</MyAppBar>

<ScrollContainer ContentClass="d-flex flex-column"
                 ContentStyle="height:100%;padding-top:0px;">
    <div>
        <div class="px-3 px-sm-1 d-flex align-end">
            <button class="d-flex align-center text-h6 font-weight-bold" @onclick="()=>ShowCreateTime=true">
                @(CreateTime.ToString("yyyy/MM/dd"))
                <MIcon Class="ml-2">
                    mdi-pencil-outline
                </MIcon>
            </button>

            <span class="pl-5 text-subtitle-1">
                @(I18n.ToWeek(CreateTime))
            </span>
            <MSpacer></MSpacer>
            <span class="text-subtitle-1">
                @(CounterValue())
            </span>
        </div>
        <div class="px-2 px-sm-0">
            <MChip Class="my-2 mr-2"
                   Outlined="true"
                   OnClick="()=>ShowWeather=true">
                <MIcon Left>
                    @(WeatherIcon)
                </MIcon>
                @WeatherText
            </MChip>
            <MChip Class="my-2 mr-2"
                   Outlined="true"
                   OnClick="()=>ShowMood=true">
                <MIcon Left>
                    @(MoodIcon)
                </MIcon>
                @MoodText
            </MChip>
            <MChip Class="my-2 mr-2"
                   Outlined="true"
                   OnClick="()=>ShowLocation=true">
                <MIcon Left>
                    mdi-map-marker-outline
                </MIcon>
                @(string.IsNullOrEmpty(Location) ? I18n.T("Write.Location") : Location)
            </MChip>
        </div>
    </div>
    @if (EnableTitle)
    {
        <MTextField @bind-Value="Diary.Title"
                    Class="pb-0 my-sm-4 user-select font-weight-bold flex-grow-0"
                    Solo="Mobile"
                    Flat="Mobile"
                    Outlined="Desktop"
                    TValue="string"
                    HideDetails="@("auto")"
                    Dense="true"
                    spellcheck="false"
                    maxlength="50"
                    Placeholder="@(I18n.T("Write.TitlePlace"))">
        </MTextField>
    }

    <div class="write-input-wrap">
        @if (EnableMarkdown)
        {
            <MyMarkdown @ref="MyMarkdown"
                        @bind-Value="Diary.Content"
                        WrapClass="write-markdown-wrap"
                        Class="my-sm-4 px-3 rounded-lg write-markdown">
            </MyMarkdown>
        }
        else
        {
            <MyTextarea @ref="MyTextarea"
                        @bind-Value="Diary.Content"
                        Class="my-sm-4 rounded-lg">
            </MyTextarea>
        }
    </div>

    <div class="mb-sm-5 @(SelectedTags.Any()?"":"d-none")">
        <div class="write-chip-group" style="width:100%;">
            @foreach (var item in SelectedTags)
            {
                <MChip Close="true"
                       Outlined="true"
                       OnCloseClick="()=>RemoveSelectedTag(item)">
                    @(item.Name)
                </MChip>
            }
        </div>
    </div>

    @if (EnableMarkdown)
    {
        <div class="vditor-toolbar-help"></div>
    }


</ScrollContainer>

<SelectTags @bind-Value="ShowSelectTag"
            @bind-Values="SelectedTags"
            @bind-Tags="Tags"
            OnSave="SaveSelectTags">
</SelectTags>

<SelectIconDialog @bind-Value="ShowWeather"
                  @bind-Item="@Weather"
                  Title="@(I18n.T("Write.SelectWeather"))"
                  Items="WeatherIcons"
                  Text="@(item=>I18n.T("Weather." + item.Key))">
</SelectIconDialog>

<SelectIconDialog @bind-Value="ShowMood"
                  @bind-Item="@Mood"
                  Title="@(I18n.T("Write.SelectMood"))"
                  Items="MoodIcons"
                  Text="@(item=>I18n.T("Mood." + item.Key))">
</SelectIconDialog>

<SelectLocation @bind-Value="ShowLocation"
                @bind-Location="Location">
</SelectLocation>

<MultiDatePicker @bind-Value="ShowCreateTime"
                 @bind-Date="CreateDate">
</MultiDatePicker>

<MOverlay Value="Overlay"
          Opacity="0">
</MOverlay>